<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<style>
			@keyframes warn {
				0% {
					transform: scale(0);
					opacity: 0.0;
				}
				25% {
					transform: scale(0);
					opacity: 0.1;
				}
				50% {
					transform: scale(0.1);
					opacity: 0.3;
				}
				75% {
					transform: scale(0.5);
					opacity: 0.5;
				}
				100% {
					transform: scale(1);
					opacity: 0.0;
				}
			}
			
			@-webkit-keyframes "warn" {
				0% {
					-webkit-transform: scale(0);
					opacity: 0.0;
				}
				25% {
					-webkit-transform: scale(0);
					opacity: 0.1;
				}
				50% {
					-webkit-transform: scale(0.1);
					opacity: 0.3;
				}
				75% {
					-webkit-transform: scale(0.5);
					opacity: 0.5;
				}
				100% {
					-webkit-transform: scale(1);
					opacity: 0.0;
				}
			}
			
			.container {
				position: relative;
				width: 40px;
				height: 40px;
				border: 1px solid #E3E3E3;
			}
			/* 保持大小不变的小圆圈  */
			
			.dot {
				position: absolute;
				width: 6px;
				height: 6px;
				left: 15px;
				top: 15px;
				-webkit-border-radius: 20px;
				-moz-border-radius: 20px;
				border: 2px solid #E3E3E3;
				border-radius: 20px;
				z-index: 2;
			}
			/* 产生动画（向外扩散变大）的圆圈  */
			
			.pulse {
				position: absolute;
				width: 24px;
				height: 24px;
				left: 2px;
				top: 2px;
				border: 6px solid #E3E3E3;
				-webkit-border-radius: 30px;
				-moz-border-radius: 30px;
				border-radius: 30px;
				z-index: 1;
				opacity: 0;
				-webkit-animation: warn 3s ease-out;
				-moz-animation: warn 3s ease-out;
				animation: warn 3s ease-out;
				-webkit-animation-iteration-count: infinite;
				-moz-animation-iteration-count: infinite;
				animation-iteration-count: infinite;
			}
		</style>

	</head>

	<body>
		<div class="container">
			<div class="dot"></div>
			<div class="pulse"></div>
		</div>
	</body>

</html>